<template>
  <div class="app-container">
    <!-- 头部过滤 -->
    <div class="filter-container" style="text-align:right">
      <el-button @click="onClickAddTab" size="small" icon="el-icon-plus" type="success">添加规格</el-button>
    </div>
    <!-- 表格主体 -->
    <div class="table-wrapper">
      <!-- tab栏目 -->
      <el-tabs closable @tab-remove="removeTab" v-model="tabsActivity" @tab-click="onClickTab" type="border-card">
        <el-tab-pane v-for="(item,i) in tabs" :key="i" :label="item.specName" :name="item.id">
          <!-- 筛选框 -->
          <div class="filter-container">
            <!-- 添加属性 -->
            <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm" />
            <el-button v-else class="button-new-tag" size="small" @click="onClickAddProperty">+新增属性</el-button>
          </div>
          <div class="tag-wrap">
            <el-tag v-for="(tag,index) in tags" :key="index" @close="onCloseTag(tag)" closable>
              {{tag.propertyName}}
            </el-tag>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: [],
      tabsActivity: '', // 这个tabsActivity是选中的
      dialogFormVisible: false,
      tags: [
        { name: '标签一', type: '' },
        { name: '标签二', type: 'success' },
        { name: '标签三', type: 'info' },
        { name: '标签四', type: 'warning' },
        { name: '标签五', type: 'danger' },
      ],
      inputVisible: false,
      inputValue: '',
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
  },
  methods: {
    init() {
      this.getSpecificationList();
    },
    // 切换tab栏
    onClickTab(tab, event) {
      console.log(tab, event);
      const specId = this.tabsActivity;
      this.getPropertyListBySpecId(specId);
    },
    // 增加规格
    async onClickAddTab() {
      const result = await this.$prompt('增加规格', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).catch(() => {});
      if (!result) return;
      const { value } = result;
      const data = {
        active: '1',
        merchantId: this.$store.getters.customerId,
        specName: value,
      };
      await this.$api.addSpecification(data);
      this.getSpecificationList();
    },
    // 获取规格
    async getSpecificationList() {
      const response = await this.$api.getSpecificationList();
      response.data.map((item) => {
        item.id = item.id.toString();
      });
      this.tabs = response.data;
      if (response.data.length === 0) return;
      this.tabsActivity = response.data[0].id;
      // 获取第一个规格下的熟悉
      this.getPropertyListBySpecId(this.tabsActivity);
    },
    // 获取某一个分类下的所有规格
    async getPropertyListBySpecId(specId) {
      const response = await this.$api.getPropertyListBySpecId(specId);
      this.tags = response.data;
    },

    // 新增属性
    onClickAddProperty() {
      this.inputVisible = true;
      this.$nextTick(() => {
        const activeIndex = this.tabs.findIndex(
          (e) => e.id === this.tabsActivity
        );
        this.$refs.saveTagInput[activeIndex].$refs.input.focus();
      });
    },
    // 新增规格下的属性
    async handleInputConfirm() {
      const { inputValue, tabsActivity: specId } = this.$data;
      // 这里要发送请求
      const options = {
        active: '1',
        propertyName: inputValue,
        specName: inputValue,
        specId,
      };
      if (!inputValue.trim()) {
        this.inputVisible = false;
        this.inputValue = '';
        return;
      }
      await this.$api.addProperty(options);
      this.inputVisible = false;
      this.inputValue = '';
      // 获取当前规格下的属性
      this.getPropertyListBySpecId(specId);
    },
    async removeTab(id) {
      const confirm = await this.$confirm(
        `此操作将永久删除该文件, 是否继续?`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).catch(() => {});
      if (!confirm) return;
      await this.$api.deleteSpecification({ id });
      this.getSpecificationList();
    },
    // 删除属性
    async onCloseTag(tag) {
      const { tabsActivity: specId } = this.$data;
      const confirm = await this.$confirm(
        `此操作将永久删除该文件, 是否继续?`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).catch(() => {});
      if (!confirm) return;
      await this.$api.deleteProperty(tag.id);
      setTimeout(() => {
        // 获取当前规格下的属性
        this.getPropertyListBySpecId(specId);
      }, 100);
    },
  },
};
</script>

<style lang="scss" scoped>
.tag-wrap {
  padding: 0px 20px 20px 0;
  & /deep/ .el-tag {
    margin-right: 20px;
    margin-top: 20px;
  }
}
</style>
